<template>
    <div class="wrapper">
        <el-container>
            
                <el-main>
                    <div class="deta">
                        <el-form ref="form" :model="form" label-width="100px">
                            <div class="deta11">
                                <h3>客户详情</h3>
                                <el-button type="primary" @click="onSubmit(form)">添加到合同管理</el-button>
                            </div>
                            <div class="deta-top">
                                <div class="deta1">
                                    <el-form-item label="客户姓名 :">
                                        <el-input v-model="form.date"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系方式 :">
                                        <el-input v-model="form.province"></el-input>
                                    </el-form-item>
                                    <el-form-item label="线索来源 :">
                                        <el-select v-model="form.city" placeholder="">
                                            <el-option label="客户介绍" value="客户介绍"></el-option>
                                            <el-option label="线下导入" value="线下导入"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="意向车型 :">
                                        <el-select v-model="form.address" placeholder="请选择车型">
                                            <el-option label="宝马x100" value="宝马x100"></el-option>
                                            <el-option label="宝马x200" value="宝马x200"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="deta-biaoqian">
                                        <p>客户标签 :</p>
                                        <el-row>
                                            <el-button @click="goTo" id="aa" v-model="form.name">+添加标签</el-button>
                                        </el-row>

                                    </div>
                                    <div class="showw" v-show="show">
                                        <ul id="roww" @click="choose">
                                            <li type="danger">大客户</li>
                                            <li type="warning">预算多</li>
                                            <li type="success">有意愿</li>
                                        </ul>

                                    </div>
                                </div>
                                <div class="deta1 deta2">
                                    <el-form-item label="性别 :">
                                        <el-input v-model="form.sex"></el-input>
                                    </el-form-item>
                                    <el-form-item label="微信号 :">
                                        <el-input v-model="form.wei"></el-input>
                                    </el-form-item>
                                    <el-form-item label="线索状态 :" size="large">
                                        <el-input v-model="form.zip"></el-input>
                                    </el-form-item>
                                    <el-form-item label="当前跟进人 :" size="large">
                                        <el-input v-model="form.genjin"></el-input>
                                    </el-form-item>



                                </div>
                            </div>

                        </el-form>
                        <div class="deta-bot">
                            <div class="deta11">

                                <h3>跟进情况</h3>
                                <el-button type="primary" @click="dialogVisible =true">添加跟进情况</el-button>

                            </div>
                            <ul>
                                <li>
                                    <div class="deta-bot1">
                                        <div class="deta-bot131">
                                            <div class="deta-bot13">
                                                <div class="deta-bot11">01</div>
                                                <div class="deta-bot12"></div>
                                            </div>
                                            <p>
                                                <span>跟进时间 :</span>
                                                <span>2021-10-10 11:20</span>
                                            </p>
                                        </div>
                                        <div class="deta-bot141"  @click="dialogVisible =true">
                                            <img src="https://cdn7.axureshop.com/demo/2034244/images/%E5%AE%A2%E6%88%B7%E8%AF%A6%E6%83%85/u1360.svg"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="deta-bot2">
                                        <span>跟进人 :</span>
                                        <span>沙发上</span>
                                    </div>
                                    <div class="deta-bot3">
                                        <span>跟进状态 :</span>
                                        <select name="" id="" v-model="price">
                                            <option value="0">预约试驾</option>
                                            <option value="1">取消试驾</option>
                                            <option value="2">已确定购买</option>
                                            <option value="3">不打算购买</option>
                                            <option value="4">有意愿购买</option>
                                        </select>
                                    </div>
                                    <div class="deta-bot4">
                                        <span>跟进记录 :</span>
                                        <textarea name="" id="" cols="30" rows="10" v-model="aa"></textarea>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </el-main>
         
        </el-container>
        <div>
            <el-dialog v-show="dialogVisible" width="500px" :before-close="handleClose">
                <div class="data-tan">
                    <div class="data-tan1">
                        <span>跟进状态 :</span>
                        <select name="" id="" v-model="price">
                            <option value="0">预约试驾</option>
                            <option value="1">取消试驾</option>
                            <option value="2">已确定购买</option>
                            <option value="3">不打算购买</option>
                            <option value="4">有意愿购买</option>
                        </select>
                    </div>
                    <div class="data-tan2">
                        <span>跟进记录 :</span>
                        <textarea name="" id="" cols="30" rows="10" v-model="aa"></textarea>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
  
<script>
import {getManageListTotal,editManageList} from "@/api/index";
export default {
    name: "DetailUser",
    data() {
        return {
            dialogVisible: false,
            show:false,
            form: {
                date: '',
                province:'' ,
                city: '',
                address: '',
                sex: '',
                wei: '',
                zip: '',
                genjin: '',
                // name: [],
            },
            aa: "",
            price: 0,
            userid:""
            // inner: [],

        }
    },
    methods: {
        async getManageListTotal(){
            const _data = await getManageListTotal();
            const _res = await (_data).data;

            for(let i = 0; i < _res.length; i++){
                if(_res[i].id == this.userid){
                     this.form = _res[i] 
                    
                }

            }
            console.log(_res);
        },


        // 表格提交并跳转
        onSubmit(row) {
            this.forms = JSON.parse(JSON.stringify(row))
            editManageList(this.forms)
            this.$router.push( '/customer')
        },
        goTo() {
            this.show = !this.show
            // var aa = this.$route.params.date
            // console.log(aa);
        },
        // 添加跟进情况       

        // 获取标签
        choose(e) {
            this.form.inner.push(e.target.innerHTML);
            this.form.inner = Array.from(new Set(this.form.inner))
            let _aa = document.getElementById('aa')
            _aa.innerText = this.form.inner
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => { });
        },

        // 获取路由
        getId(){
            this.userid = this.$route.query.id
            console.log(this.userid);
        }
    },
    mounted(){
        this.getManageListTotal()
        this.getId()
    }


}
</script>
<style lang="less" scoped>
.el-container {
    height: 100vh;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;

}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;

}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

}

.deta {
    background-color: #FFF;
    padding: 20px 50px;

    .deta11 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
}


.deta2 {
    margin-left: 20px;

    .genji {
        display: flex;

        label {
            width: 120px;

        }
    }
}

.deta-top {
    width: 85%;
    margin: 0 auto;

    display: flex;
}

label {
    width: 100px;
}

.deta-biaoqian {
    display: flex;

    p {
        width: 100px;

        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }

    .el-button {
        color: #1890FF;
    }
}

#roww {
    list-style: none;
    display: flex;

    li {
        padding: 5px 10px;
        margin-left: 5px;
        color: #fff;
        border-radius: 5px;
    }

    li:nth-child(1) {
        background-color: #EC808D;
    }

    li:nth-child(2) {
        background-color: #F59A23;
    }

    li:nth-child(3) {
        background-color: #70B603;
    }
}

.showw {
    margin-left: 40px;
    margin-top: 20px;

    .el-button {
        margin-left: 10px;
    }

}

.deta-bot {
    margin-top: 20px;


    ul {
        text-align: left;
        margin-top: 10px;
        height: 500px;
        overflow: auto;
    }

    li {
        list-style: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin: 20px 0;

        .deta-bot1 {
            display: flex;
            justify-content: space-between;

            .deta-bot131 {
                display: flex;

                .deta-bot13 {
                    display: flex;

                    .deta-bot11 {
                        width: 40px;
                        height: 28px;
                        background-color: #1890FF;
                        line-height: 28px;
                        text-align: center;
                        color: #fff;
                    }

                    .deta-bot12 {
                        width: 0;
                        height: 0;
                        border-left: 15px solid #1890FF;
                        border-top: 15px solid transparent;
                        border-bottom: 15px solid transparent;


                    }

                }

                p {
                    margin-left: 10px;

                    span {
                        margin-left: 10px;
                    }
                }
            }

            .deta-bot141 {
                margin-right: 30px;
            }

        }

        .deta-bot2 {
            margin: 20px;
            margin-left: 80px;

            span {
                margin-left: 10px;
            }
        }

        .deta-bot3 {
            margin: 20px;
            margin-left: 74px;

            select {
                margin-left: 10px;
                width: 200px;
                padding: 5px;
                border-radius: 3px;
                // border: #333;
            }
        }

        .deta-bot4 {

            display: flex;

            span {

                margin-left: 74px;
            }

            textarea {
                resize: none;
                margin-left: 10px;
                width: 400px;
                height: 50px;
                padding: 5px;
            }
        }

    }
}

.data-tan {
    .data-tan1 {
        span {
            color: #000;
        }

        select {
            margin-left: 10px;
            width: 200px;
            padding: 5px;
            border-radius: 3px;
            // border: #333;
        }
    }

    .data-tan2 {
        margin-top: 20px;
        display: flex;

        span {
            color: #000;
        }

        textarea {
            resize: none;
            margin-left: 10px;
            width: 260px;
            height: 100px;
            padding: 5px;
        }
    }

}
</style>